CSS-templates: integration of the design (in particulary category and main buttons)

65 files changed, 562 insertions, 140 deletions

diff --git a/fixtures/saclay_categories.json b/fixtures/saclay_categories.json
new file mode 100644
index 0000000..cfbd283
--- /dev/null
+++ b/fixtures/saclay_categories.json
@@ -0,0 +1,82 @@
+[
+    {
+        "pk": 2,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "<p>Test</p>\r\n<p>&nbsp;</p>",
+            "name": "\u00c9v\u00e9nements",
+            "order": 10
+        }
+    },
+    {
+        "pk": 1,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit porta eros, quis varius orci luctus nec. Suspendisse tempor sagittis tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus imperdiet consequat dolor. Etiam risus orci, auctor nec hendrerit ut, congue at ante. Aliquam et accumsan neque. Aliquam ac massa felis, ac porttitor nunc. Curabitur blandit odio id enim sodales blandit. Curabitur eleifend commodo lorem a feugiat. Nam at quam semper justo ultricies tempor.</p>",
+            "name": "Culture",
+            "order": 20
+        }
+    },
+    {
+        "pk": 3,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "",
+            "name": "Patrimoines",
+            "order": 30
+        }
+    },
+    {
+        "pk": 4,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "",
+            "name": "Sport et loisirs",
+            "order": 40
+        }
+    },
+    {
+        "pk": 5,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "",
+            "name": "Ressources pratiques",
+            "order": 50
+        }
+    },
+    {
+        "pk": 6,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "",
+            "name": "Mobilit\u00e9s",
+            "order": 60
+        }
+    },
+    {
+        "pk": 7,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "",
+            "name": "Agri-cultures",
+            "order": 70
+        }
+    },
+    {
+        "pk": 8,
+        "model": "chimere.category",
+        "fields": {
+            "available": true,
+            "description": "",
+            "name": "Balades",
+            "order": 80
+        }
+    }
+]
\ No newline at end of file
diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po
index d3cbae2..f90089a 100644
--- a/locale/fr/LC_MESSAGES/django.po
+++ b/locale/fr/LC_MESSAGES/django.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: 2.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2012-09-05 19:09+0200\n"
+"POT-Creation-Date: 2012-10-16 15:51+0200\n"
 "Last-Translator: Étienne Loks <etienne.loks@peacefrogs.net>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -52,7 +52,13 @@ msgstr ""
 "Bonjour, je voudrais vous proposer une modification à propos de cet "
 "élément : "
 
-#: templates/chimere/base.html:19
+#: settings.py:109
+msgid "This itinerary has dangerous passages. You should change it."
+msgstr ""
+"Cet itinéraire comporte des passages dangereux. Nous vous conseillons "
+"de modifier votre recherche."
+
+#: templates/chimere/base.html:21
 msgid "You must enable JavaScript in your browser to display Chimère."
 msgstr ""
 "Vous devez activer le JavaScript dans votre navigateur pour afficher Chimère."
@@ -92,17 +98,9 @@ msgid "Zoom out"
 msgstr "Zoom en arrière"
 
 #: templates/chimere/detail.html:46
-msgid "Share on:"
-msgstr "Partager :"
-
-#: templates/chimere/detail.html:50
 msgid "Propose a modification"
 msgstr "Proposer une modification"
 
-#: templates/chimere/detail.html:52
-msgid "Share:"
-msgstr "Partager :"
-
 #: templates/chimere/edit.html:4
 msgid "Add an event"
 msgstr "Ajouter un événement"
@@ -198,37 +196,37 @@ msgstr ""
 "Erreur lors du chargement de la page... Rafraichissez la page. Si le "
 "problème perdure prennez contact avec le webmaster."
 
-#: templates/chimere/main_map.html:29
+#: templates/chimere/main_map.html:28
 msgid "Categories"
 msgstr "Categories"
 
-#: templates/chimere/main_map.html:32
+#: templates/chimere/main_map.html:31
 msgid "Routing"
 msgstr "Itinéraire"
 
-#: templates/chimere/main_map.html:37
+#: templates/chimere/main_map.html:36
 msgid "Location"
 msgstr "Lieu"
 
-#: templates/chimere/main_map.html:40
+#: templates/chimere/main_map.html:39
 msgid "Wander"
 msgstr "Balade"
 
-#: templates/chimere/main_map.html:43
+#: templates/chimere/main_map.html:42
 msgid "Event"
 msgstr "Événement"
 
+#: templates/chimere/main_map.html:64
+msgid "contact us"
+msgstr "nous contacter"
+
 #: templates/chimere/main_map.html:65
-msgid "Contact us"
-msgstr "Nous contacter"
+msgid "terms of service"
+msgstr "mentions légales"
 
 #: templates/chimere/main_map.html:66
-msgid "Terms of service"
-msgstr "Mentions légales"
-
-#: templates/chimere/main_map.html:67
-msgid "Credits"
-msgstr "Crédits"
+msgid "credits"
+msgstr "crédits"
 
 #: templates/chimere/blocks/actions.html:5
 msgid "Map"
@@ -248,7 +246,19 @@ msgstr "Actualités"
 msgid "The project"
 msgstr "Le projet"
 
-#: templates/chimere/blocks/map_params.html:86
+#: templates/chimere/blocks/map.html:9
+msgid "Loading of the map in progress"
+msgstr ""
+
+#: templates/chimere/blocks/map.html:13
+msgid "Display options"
+msgstr ""
+
+#: templates/chimere/blocks/map.html:15
+msgid "Map type"
+msgstr ""
+
+#: templates/chimere/blocks/map.html:53
 msgid "Permalink"
 msgstr "Lien permanent"
 
@@ -274,26 +284,34 @@ msgstr "Recherche"
 msgid "Roadmap"
 msgstr "Feuille de route"
 
-#: templates/chimere/blocks/routing.html:24
+#: templates/chimere/blocks/routing.html:30
 msgid "Start"
 msgstr "Départ"
 
-#: templates/chimere/blocks/routing.html:28
+#: templates/chimere/blocks/routing.html:34
 msgid "Finish"
 msgstr "Arrivée"
 
-#: templates/chimere/blocks/routing.html:33
+#: templates/chimere/blocks/routing.html:39
 msgid "Modify"
 msgstr "Modifier"
 
-#: templates/chimere/blocks/routing.html:36
+#: templates/chimere/blocks/routing.html:42
 msgid "New search"
 msgstr "Nouvelle recherche"
 
-#: templates/chimere/blocks/routing.html:43
+#: templates/chimere/blocks/routing.html:49
 msgid "Step"
 msgstr "Étape"
 
+#: templates/chimere/blocks/share_bar.html:3
+msgid "Share on"
+msgstr "Partager sur"
+
+#: templates/chimere/blocks/share_bar.html:7
+msgid "Share"
+msgstr "Partager"
+
 #: templates/chimere/blocks/submited.html:16
 msgid "Thank you for your contribution to the project!"
 msgstr "Merci pour votre contribution au projet !"
diff --git a/settings.py b/settings.py
index d6d95b8..c04a6f8 100644
--- a/settings.py
+++ b/settings.py
@@ -53,10 +53,10 @@ CHIMERE_DAYS_BEFORE_EVENT = 30
 # allow feeds
 CHIMERE_FEEDS = True
 
-CHIMERE_ICON_WIDTH = 21
-CHIMERE_ICON_HEIGHT = 25
-CHIMERE_ICON_OFFSET_X = -10
-CHIMERE_ICON_OFFSET_Y = -25
+CHIMERE_ICON_WIDTH = 36
+CHIMERE_ICON_HEIGHT = 42
+CHIMERE_ICON_OFFSET_X = -18
+CHIMERE_ICON_OFFSET_Y = -42
 
 # display picture inside the description by default or inside a galery?
 CHIMERE_MINIATURE_BY_DEFAULT = False
diff --git a/static/saclay/css/styles-saclay.css b/static/saclay/css/styles-saclay.css
index e1e825f..ca7556d 100644
--- a/static/saclay/css/styles-saclay.css
+++ b/static/saclay/css/styles-saclay.css
@@ -31,7 +31,10 @@ a, a:link, a:visited,
 #footer .map-footer a, #footer .map-footer a:link,
 #footer .map-footer a:visited,
 .detail_footer a, caption{
-    color:#4b5b7c;
+    color:#9da1a1;
+    text-decoration:none;
+    font-weight:bold;
+    font-size:0.8em;
 }
 
 /*
@@ -40,9 +43,7 @@ a, a:link, a:visited,
 
 /* default */
 body, h2, #content,
-#sidebar, #action-panel,
-#layer_selection #layer_list,
-.sidebar-handler,
+#sidebar, #layer_selection #layer_list,
 .action li.ui-button,
 #detail_content, .edit, .edit h3
 {
@@ -55,14 +56,9 @@ body, h2, #content,
 .no-titlebar h2, #footer-panel,
 ul#multimedia_list_content li, #welcome .footer,
 #chimere_itinerary_content div.n, #action,
-div.cloud h4, #detail_footer, .sidebar-handler:hover,
+div.cloud h4, #detail_footer,
 #ul_categories li.main_category .subcategories li span{
-    background-color:#ccc;
-}
-
-/* selected */
-.action li.ui-state-active{
-    background-color:#00a3ff;
+    background-color:#d6d6c4;
 }
 
 /* blank */
@@ -82,7 +78,7 @@ h3{
 .itinerary_label .label, #footer-panel,
 #detail_footer, div.cloud h4,
 #areas, #detail, #main-map, div.warning,
-#content, .action li.selected, .sidebar-handler,
+#content, .action li.selected,
 #content .olControlLayerSwitcher .layersDiv,
 #panel, #map-footer, #utils-div, #action,
 #panel #categories, .main_category, #page_title,
@@ -284,6 +280,7 @@ h4{
     border-bottom-width:1px;
     border-bottom-style:solid;
     background-color:#fff;
+    display:none;
 }
 
 #page_title h1{
@@ -303,8 +300,10 @@ h4{
 }
 
 #topbar{
-    height:32px;
+    height:26px;
     padding:0;
+    background-image:url('../images/background-top.png');
+    background-repeat:repeat-x;
 }
 
 #header{
@@ -317,8 +316,7 @@ ul#action-2 {
     display:block;
     float: left;
     margin:0;
-    padding:5px;
-    height:22px;
+    padding:0;
 }
 
 #action-3 {
@@ -338,18 +336,17 @@ ul#action-2 {
 ul.action li{
     display:block;
     float:left;
+    margin:0;
+    height:26px;
 }
 
 .action li:hover,
 .action li label:hover{
     cursor:pointer;
-    background-color:#ccc;
 }
 
 ul#action{
-    border-right-width:1px;
-    border-right-style:solid;
-    width:272px;
+    width:282px;
 }
 
 #panel #categories{
@@ -359,30 +356,226 @@ ul#action{
 }
 
 #action-panel .action li{
-    padding:2px 1px;
+    padding:0;
+    height:38px;
+    width:138px;
+    margin-top:22px;
 }
 
-#action-panel .action li label{
-    padding:0 15px;
+.action li,
+.action li a,
+.action li label{
+    padding:0;
+    margin:0;
+    font-size:1.1em;
+    margin-top:10px;
+    text-align:center;
+    width:141px;
+    display:block;
+    text-transform:uppercase;
+    color:transparent;
+    border-width:0;
 }
 
-#action-categories.category-selected label,
-.category-selected{
-    background-image:url(../images/check.png) ;
+.action li label{
+    width:130px;
+}
+
+#action-3.action li,
+#action-3.action li a{
+    width:86px;
+}
+
+.action li .share a{
+    color:transparent;
+}
+
+#action-3.action li.share-list li,
+#action-3.action li.share-list{
+    width:auto;
+}
+
+#action-3.action li.share-list li.shared,
+#action-3.action li.share-list li.shared a{
+    width:26px;
+    margin:1px 0;
+}
+
+.action li.print-page{
+    background-image:url(../images/button-print-off.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.print-page.state-active,
+.action li.print-page:hover{
+    background-image:url(../images/button-print-on.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.share-icon.state-active,
+.action li.share-icon:hover{
+    background-image:url(../images/button-share-on.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.share-icon{
+    background-image:url(../images/button-share-off.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.share-send.state-active,
+.action li.share-send:hover{
+    background-image:url(../images/button-send-on.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.share-send{
+    background-image:url(../images/button-send-off.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.help-page.state-active,
+.action li.help-page:hover{
+    background-image:url(../images/button-help-on.png) ;
+    background-repeat:no-repeat;
+}
+
+.action li.help-page{
+    background-image:url(../images/button-help-off.png) ;
     background-repeat:no-repeat;
 }
 
-.category-selected{
-    padding-right:20px;
-    background-position:right bottom;
+#action-carte{
+    background-image:url(../images/button-map-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-carte.state-active,
+#action-carte:hover{
+    background-image:url(../images/button-map-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-participate{
+    background-image:url(../images/button-participate-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-participate.state-active,
+#action-participate:hover{
+    background-image:url(../images/button-participate-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-news{
+    background-image:url(../images/button-news-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-news.state-active,
+#action-news:hover{
+    background-image:url(../images/button-news-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-project{
+    background-image:url(../images/button-project-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-project.state-active,
+#action-project:hover{
+    background-image:url(../images/button-project-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-categories{
+    background-image:url(../images/button-cat-off.png) ;
+    background-repeat:no-repeat;
+    margin-right:6px;
+}
+
+#action-categories.state-active,
+#action-categories:hover{
+    background-image:url(../images/button-cat-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-routing{
+    background-image:url(../images/button-route-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-routing.state-active,
+#action-routing:hover{
+    background-image:url(../images/button-route-on.png) ;
+    background-repeat:no-repeat;
+}
+
+
+#action-categories.category-selected label{
+    background-image:url(../images/check-active.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-categories.category-selected.state-active label,
+#action-categories.category-selected:hover label{
+    background-image:url(../images/check.png) ;
+    background-repeat:no-repeat;
 }
 
 #action-categories.category-selected label{
     background-position:right center;
 }
 
+#action-edit-marker{
+    background-image:url(../images/button-location-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-panel .action li#action-edit-marker{
+    width:78px;
+}
+
+#action-edit-marker.state-active,
+#action-edit-marker:hover{
+    background-image:url(../images/button-location-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-panel .action li#action-edit-route{
+    width:98px;
+}
+
+#action-edit-route{
+    background-image:url(../images/button-wander-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-edit-route.state-active,
+#action-edit-route:hover{
+    background-image:url(../images/button-wander-on.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-panel .action li#action-edit-event{
+    width:104px;
+}
+
+#action-edit-event{
+    background-image:url(../images/button-event-off.png) ;
+    background-repeat:no-repeat;
+}
+
+#action-edit-event.state-active,
+#action-edit-event:hover{
+    background-image:url(../images/button-event-on.png) ;
+    background-repeat:no-repeat;
+}
+
+
 #main-map{
-    top:95px;
+    top:26px;
     bottom:0;
     height:auto;
 }
@@ -397,32 +590,57 @@ ul#action{
     display:none;
 }
 
+div#map-shadow{
+    position:absolute;
+    left:0;
+    bottom:0;
+    top:26px;
+    width:15px;
+    z-index:5;
+}
+
+div#map-shadow,
+div#sidebar{
+    background-color:transparent;
+    background-image:url('../images/shadow.png');
+    background-position:right;
+    background-repeat:repeat-y;
+}
+
 div#sidebar{
     z-index:7;
-    width:281px;
-    top:95px;
+    width:282px;
+    top:26px;
     position:absolute;
     bottom:0;
+    padding-right:15px;
 }
 
 div#action-panel{
-    border-width:1px;
+    border-width:0;
+    border-right-width:1px;
     border-style:solid;
     z-index:10;
-    height:34px;
-    width:281px;
+    height:60px;
+    width:282px;
+    background-image:url(../images/background-small.png) ;
+    background-repeat:no-repeat;
+    background-position:center;
 }
 
 div#panel{
     position:absolute;
-    width:281px;
+    width:282px;
     z-index:10;
     max-height:none;
     padding:0;
     right:auto;
     bottom:26px;
-    top:34px;
-    border-top-width:0;
+    top:60px;
+    border-width:0 1px;
+    background-image:url('../images/logo.png');
+    background-repeat:no-repeat;
+    background-position:left bottom;
 }
 
 #chimere_itinerary h4{
@@ -445,39 +663,34 @@ ul#roadmap_toolbar, ul#roadmap_toolbar ul, ul#roadmap_toolbar li{
 
 #footer-panel{
     text-align:center;
-    padding:0.2em;
+    padding:3px;
     bottom:0;
     position:absolute;
-    width:277px;
+    width:275px;
     height:22px;
-    border-right:1px solid;
 }
 
 .sidebar-handler{
-    height:30px;
+    height:55px;
     width:18px;
     position:absolute;
-    border-width:1px;
-    border-style:solid;
-    border-left-width:0;
-    -webkit-border-radius: 0 4px 4px 0;
-    -moz-border-radius: 0 4px 4px 0;
-    border-radius: 0 4px 4px 0;
-    font-size:18px;
-    text-align:center;
-    line-height:30px;
+    background-position:left top;
 }
 
 #sidebar-handler-hide{
-    top:80px;
-    right:-21px;
+    bottom:102px;
+    right:-4px;
     z-index:10;
+    background-image:url('../images/handler-hide.png');
+    background-repeat:no-repeat;
 }
 
 #sidebar-handler-show{
-    top:175px;
+    bottom:102px;
     left:0px;
-    z-index:5;
+    z-index:6;
+    background-image:url('../images/handler-show.png');
+    background-repeat:no-repeat;
 }
 
 .sidebar-handler:hover{
@@ -493,35 +706,137 @@ ul#ul_categories{
     width:auto;
 }
 
-#ul_categories li.main_category{
-    font-variant:normal;
-    font-weight:bold;
-    border-bottom-width:1px;
-    border-bottom-style:solid;
+#ul_categories li.main_category > span{
+    color:transparent;
+    display:block;
+    height:40px;
+    padding:0;
+    margin:0;
 }
 
 #ul_categories li.main_category span{
     display:block;
-    padding: 0.5em 1em;
 }
 
+
 #ul_categories li.main_category .subcategories li span{
     padding: 0.3em 1.2em;
 }
 
 #ul_categories .subcategories li{
-    border-top-width:1px;
-    border-top-style:solid;
+    border-bottom-width:1px;
+    border-bottom-style:solid;
     font-weight:normal;
     margin:0;
 }
 
-.toggle_category,
+.toggle_category{
+    margin-top:13px;
+    margin-right:2px;
+}
+
+.control_image{
+    visibility:hidden;
+}
+
+.main_category > span > label{
+    display:block;
+    width:100%;
+    height:40px;
+    background-image:url('../images/plus.png');
+    background-repeat:no-repeat;
+    background-position:90% center;
+}
+
+.main_category > span.category-selected > label{
+    background-image:url('../images/plus_on.png');
+}
+
+.main_category.toggle_minus > span > label{
+    background-image:url('../images/minus.png');
+}
+
+.main_category.toggle_minus > span.category-selected > label{
+    background-image:url('../images/minus_on.png');
+}
+
 #ul_categories .subcategories input{
     display:block;
     float:right;
 }
 
+#main_category_1{
+    background-image:url('../images/cat_culture.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_1.category-selected{
+    background-image:url('../images/cat_culture_on.png');
+}
+
+#main_category_2{
+    background-image:url('../images/cat_event.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_2.category-selected{
+    background-image:url('../images/cat_event_on.png');
+}
+
+#main_category_3{
+    background-image:url('../images/cat_patrimoine.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_3.category-selected{
+    background-image:url('../images/cat_patrimoine_on.png');
+}
+
+#main_category_4{
+    background-image:url('../images/cat_sport.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_4.category-selected{
+    background-image:url('../images/cat_sport_on.png');
+}
+
+#main_category_5{
+    background-image:url('../images/cat_pratique.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_5.category-selected{
+    background-image:url('../images/cat_pratique_on.png');
+}
+
+#main_category_6{
+    background-image:url('../images/cat_mobilites.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_6.category-selected{
+    background-image:url('../images/cat_mobilites_on.png');
+}
+
+#main_category_7{
+    background-image:url('../images/cat_agri.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_7.category-selected{
+    background-image:url('../images/cat_agri_on.png');
+}
+
+#main_category_8{
+    background-image:url('../images/cat_balade.png');
+    background-repeat:no-repeat;
+}
+
+#main_category_8.category-selected{
+    background-image:url('../images/cat_balade_on.png');
+}
+
 .itinerary_label{
     line-height:18px;
     font-style:normal;
@@ -694,6 +1009,11 @@ input#id_name{
     left:auto;
 }
 
+#content .olControlLayerSwitcher .maximizeDiv,
+#content .olControlLayerSwitcher .minimizeDiv {
+    display:none;
+}
+
 #utils-div{
     left:auto;
     right:28px;
diff --git a/static/saclay/images/background-small.png b/static/saclay/images/background-small.png
new file mode 100644
index 0000000..fc904ae
--- /dev/null
+++ b/static/saclay/images/background-small.png
diff --git a/static/saclay/images/background-top.png b/static/saclay/images/background-top.png
new file mode 100644
index 0000000..c7fb8e1
--- /dev/null
+++ b/static/saclay/images/background-top.png
diff --git a/static/saclay/images/background.png b/static/saclay/images/background.png
new file mode 100644
index 0000000..564dbf4
--- /dev/null
+++ b/static/saclay/images/background.png
diff --git a/static/saclay/images/button-cat-off.png b/static/saclay/images/button-cat-off.png
new file mode 100644
index 0000000..ad9e0e5
--- /dev/null
+++ b/static/saclay/images/button-cat-off.png
diff --git a/static/saclay/images/button-cat-on.png b/static/saclay/images/button-cat-on.png
new file mode 100644
index 0000000..3c6c546
--- /dev/null
+++ b/static/saclay/images/button-cat-on.png
diff --git a/static/saclay/images/button-event-off.png b/static/saclay/images/button-event-off.png
new file mode 100644
index 0000000..34a64a6
--- /dev/null
+++ b/static/saclay/images/button-event-off.png
diff --git a/static/saclay/images/button-event-on.png b/static/saclay/images/button-event-on.png
new file mode 100644
index 0000000..cdfc2cb
--- /dev/null
+++ b/static/saclay/images/button-event-on.png
diff --git a/static/saclay/images/button-help-off.png b/static/saclay/images/button-help-off.png
new file mode 100644
index 0000000..8d6858c
--- /dev/null
+++ b/static/saclay/images/button-help-off.png
diff --git a/static/saclay/images/button-help-on.png b/static/saclay/images/button-help-on.png
new file mode 100644
index 0000000..98d986a
--- /dev/null
+++ b/static/saclay/images/button-help-on.png
diff --git a/static/saclay/images/button-location-off.png b/static/saclay/images/button-location-off.png
new file mode 100644
index 0000000..4fb3ec3
--- /dev/null
+++ b/static/saclay/images/button-location-off.png
diff --git a/static/saclay/images/button-location-on.png b/static/saclay/images/button-location-on.png
new file mode 100644
index 0000000..33f60fb
--- /dev/null
+++ b/static/saclay/images/button-location-on.png
diff --git a/static/saclay/images/button-map-off.png b/static/saclay/images/button-map-off.png
new file mode 100644
index 0000000..d9166a6
--- /dev/null
+++ b/static/saclay/images/button-map-off.png
diff --git a/static/saclay/images/button-map-on.png b/static/saclay/images/button-map-on.png
new file mode 100644
index 0000000..ff8d122
--- /dev/null
+++ b/static/saclay/images/button-map-on.png
diff --git a/static/saclay/images/button-news-off.png b/static/saclay/images/button-news-off.png
new file mode 100644
index 0000000..91d426e
--- /dev/null
+++ b/static/saclay/images/button-news-off.png
diff --git a/static/saclay/images/button-news-on.png b/static/saclay/images/button-news-on.png
new file mode 100644
index 0000000..377c266
--- /dev/null
+++ b/static/saclay/images/button-news-on.png
diff --git a/static/saclay/images/button-participate-off.png b/static/saclay/images/button-participate-off.png
new file mode 100644
index 0000000..0c5d1cd
--- /dev/null
+++ b/static/saclay/images/button-participate-off.png
diff --git a/static/saclay/images/button-participate-on.png b/static/saclay/images/button-participate-on.png
new file mode 100644
index 0000000..e8c03b8
--- /dev/null
+++ b/static/saclay/images/button-participate-on.png
diff --git a/static/saclay/images/button-print-off.png b/static/saclay/images/button-print-off.png
new file mode 100644
index 0000000..474f0cf
--- /dev/null
+++ b/static/saclay/images/button-print-off.png
diff --git a/static/saclay/images/button-print-on.png b/static/saclay/images/button-print-on.png
new file mode 100644
index 0000000..bf0679c
--- /dev/null
+++ b/static/saclay/images/button-print-on.png
diff --git a/static/saclay/images/button-project-off.png b/static/saclay/images/button-project-off.png
new file mode 100644
index 0000000..35aea1c
--- /dev/null
+++ b/static/saclay/images/button-project-off.png
diff --git a/static/saclay/images/button-project-on.png b/static/saclay/images/button-project-on.png
new file mode 100644
index 0000000..6b84d07
--- /dev/null
+++ b/static/saclay/images/button-project-on.png
diff --git a/static/saclay/images/button-route-off.png b/static/saclay/images/button-route-off.png
new file mode 100644
index 0000000..91c057c
--- /dev/null
+++ b/static/saclay/images/button-route-off.png
diff --git a/static/saclay/images/button-route-on.png b/static/saclay/images/button-route-on.png
new file mode 100644
index 0000000..c159e34
--- /dev/null
+++ b/static/saclay/images/button-route-on.png
diff --git a/static/saclay/images/button-send-off.png b/static/saclay/images/button-send-off.png
new file mode 100644
index 0000000..eeea44e
--- /dev/null
+++ b/static/saclay/images/button-send-off.png
diff --git a/static/saclay/images/button-send-on.png b/static/saclay/images/button-send-on.png
new file mode 100644
index 0000000..af7d415
--- /dev/null
+++ b/static/saclay/images/button-send-on.png
diff --git a/static/saclay/images/button-share-off.png b/static/saclay/images/button-share-off.png
new file mode 100644
index 0000000..2fdf1aa
--- /dev/null
+++ b/static/saclay/images/button-share-off.png
diff --git a/static/saclay/images/button-share-on.png b/static/saclay/images/button-share-on.png
new file mode 100644
index 0000000..1125f61
--- /dev/null
+++ b/static/saclay/images/button-share-on.png
diff --git a/static/saclay/images/button-wander-off.png b/static/saclay/images/button-wander-off.png
new file mode 100644
index 0000000..729f825
--- /dev/null
+++ b/static/saclay/images/button-wander-off.png
diff --git a/static/saclay/images/button-wander-on.png b/static/saclay/images/button-wander-on.png
new file mode 100644
index 0000000..0223f35
--- /dev/null
+++ b/static/saclay/images/button-wander-on.png
diff --git a/static/saclay/images/cat_agri.png b/static/saclay/images/cat_agri.png
new file mode 100644
index 0000000..4fd1536
--- /dev/null
+++ b/static/saclay/images/cat_agri.png
diff --git a/static/saclay/images/cat_agri_on.png b/static/saclay/images/cat_agri_on.png
new file mode 100644
index 0000000..a46323f
--- /dev/null
+++ b/static/saclay/images/cat_agri_on.png
diff --git a/static/saclay/images/cat_balade.png b/static/saclay/images/cat_balade.png
new file mode 100644
index 0000000..475be6f
--- /dev/null
+++ b/static/saclay/images/cat_balade.png
diff --git a/static/saclay/images/cat_balade_on.png b/static/saclay/images/cat_balade_on.png
new file mode 100644
index 0000000..8d1ec8a
--- /dev/null
+++ b/static/saclay/images/cat_balade_on.png
diff --git a/static/saclay/images/cat_culture.png b/static/saclay/images/cat_culture.png
new file mode 100644
index 0000000..c77a136
--- /dev/null
+++ b/static/saclay/images/cat_culture.png
diff --git a/static/saclay/images/cat_culture_on.png b/static/saclay/images/cat_culture_on.png
new file mode 100644
index 0000000..175b0a7
--- /dev/null
+++ b/static/saclay/images/cat_culture_on.png
diff --git a/static/saclay/images/cat_event.png b/static/saclay/images/cat_event.png
new file mode 100644
index 0000000..5e942d7
--- /dev/null
+++ b/static/saclay/images/cat_event.png
diff --git a/static/saclay/images/cat_event_on.png b/static/saclay/images/cat_event_on.png
new file mode 100644
index 0000000..d51ced1
--- /dev/null
+++ b/static/saclay/images/cat_event_on.png
diff --git a/static/saclay/images/cat_mobilites.png b/static/saclay/images/cat_mobilites.png
new file mode 100644
index 0000000..c678b55
--- /dev/null
+++ b/static/saclay/images/cat_mobilites.png
diff --git a/static/saclay/images/cat_mobilites_on.png b/static/saclay/images/cat_mobilites_on.png
new file mode 100644
index 0000000..9bdb1a8
--- /dev/null
+++ b/static/saclay/images/cat_mobilites_on.png
diff --git a/static/saclay/images/cat_patrimoine.png b/static/saclay/images/cat_patrimoine.png
new file mode 100644
index 0000000..6cb5d22
--- /dev/null
+++ b/static/saclay/images/cat_patrimoine.png
diff --git a/static/saclay/images/cat_patrimoine_on.png b/static/saclay/images/cat_patrimoine_on.png
new file mode 100644
index 0000000..34592d9
--- /dev/null
+++ b/static/saclay/images/cat_patrimoine_on.png
diff --git a/static/saclay/images/cat_pratique.png b/static/saclay/images/cat_pratique.png
new file mode 100644
index 0000000..17e145b
--- /dev/null
+++ b/static/saclay/images/cat_pratique.png
diff --git a/static/saclay/images/cat_pratique_on.png b/static/saclay/images/cat_pratique_on.png
new file mode 100644
index 0000000..c2629d8
--- /dev/null
+++ b/static/saclay/images/cat_pratique_on.png
diff --git a/static/saclay/images/cat_sport.png b/static/saclay/images/cat_sport.png
new file mode 100644
index 0000000..74c6971
--- /dev/null
+++ b/static/saclay/images/cat_sport.png
diff --git a/static/saclay/images/cat_sport_on.png b/static/saclay/images/cat_sport_on.png
new file mode 100644
index 0000000..a8567a7
--- /dev/null
+++ b/static/saclay/images/cat_sport_on.png
diff --git a/static/saclay/images/check-active.png b/static/saclay/images/check-active.png
new file mode 100644
index 0000000..f787c3f
--- /dev/null
+++ b/static/saclay/images/check-active.png
diff --git a/static/saclay/images/check.png b/static/saclay/images/check.png
index acb7cd2..75a1eb0 100644
--- a/static/saclay/images/check.png
+++ b/static/saclay/images/check.png
diff --git a/static/saclay/images/handler-hide.png b/static/saclay/images/handler-hide.png
new file mode 100644
index 0000000..844300a
--- /dev/null
+++ b/static/saclay/images/handler-hide.png
diff --git a/static/saclay/images/handler-show.png b/static/saclay/images/handler-show.png
new file mode 100644
index 0000000..f258f87
--- /dev/null
+++ b/static/saclay/images/handler-show.png
diff --git a/static/saclay/images/logo.png b/static/saclay/images/logo.png
index a5092c6..c4f804a 100644
--- a/static/saclay/images/logo.png
+++ b/static/saclay/images/logo.png
diff --git a/static/saclay/images/minus.png b/static/saclay/images/minus.png
index a95822f..05b4170 100644
--- a/static/saclay/images/minus.png
+++ b/static/saclay/images/minus.png
diff --git a/static/saclay/images/minus_on.png b/static/saclay/images/minus_on.png
new file mode 100644
index 0000000..6aa9e5c
--- /dev/null
+++ b/static/saclay/images/minus_on.png
diff --git a/static/saclay/images/plus.png b/static/saclay/images/plus.png
index 404a24a..ce14109 100644
--- a/static/saclay/images/plus.png
+++ b/static/saclay/images/plus.png
diff --git a/static/saclay/images/plus_on.png b/static/saclay/images/plus_on.png
new file mode 100644
index 0000000..fb1e501
--- /dev/null
+++ b/static/saclay/images/plus_on.png
diff --git a/static/saclay/images/shadow.png b/static/saclay/images/shadow.png
new file mode 100644
index 0000000..e259c8f
--- /dev/null
+++ b/static/saclay/images/shadow.png
diff --git a/static/saclay/js/interface.js b/static/saclay/js/interface.js
index 2659f99..ddee59b 100644
--- a/static/saclay/js/interface.js
+++ b/static/saclay/js/interface.js
@@ -5,9 +5,9 @@ $(function(){
                                   'dialogClass':'no-titlebar'});
 
     var update_editmarker = function(){
-        $('#action-edit-event').removeClass('ui-state-active');
-        $('#action-edit-route').removeClass('ui-state-active');
-        $('#action-edit-marker').addClass('ui-state-active');
+        $('#action-edit-event').removeClass('state-active');
+        $('#action-edit-route').removeClass('state-active');
+        $('#action-edit-marker').addClass('state-active');
         $('#frm-edit-route').hide();
         $('#frm-edit-event').hide();
         $('#frm-edit-marker').show();
@@ -27,9 +27,9 @@ $(function(){
     };
 
     var update_editevent = function(){
-        $('#action-edit-marker').removeClass('ui-state-active');
-        $('#action-edit-route').removeClass('ui-state-active');
-        $('#action-edit-event').addClass('ui-state-active');
+        $('#action-edit-marker').removeClass('state-active');
+        $('#action-edit-route').removeClass('state-active');
+        $('#action-edit-event').addClass('state-active');
         $('#frm-edit-marker').hide();
         $('#frm-edit-route').hide();
         $('#frm-edit-event').show();
@@ -49,9 +49,9 @@ $(function(){
     };
 
     var update_editroute = function(){
-        $('#action-edit-marker').removeClass('ui-state-active');
-        $('#action-edit-event').removeClass('ui-state-active');
-        $('#action-edit-route').addClass('ui-state-active');
+        $('#action-edit-marker').removeClass('state-active');
+        $('#action-edit-event').removeClass('state-active');
+        $('#action-edit-route').addClass('state-active');
         $('#frm-edit-marker').hide();
         $('#frm-edit-event').hide();
         $('#frm-edit-route').show();
@@ -80,8 +80,8 @@ $(function(){
                 $("#chimere_itinerary_form").hide();
             }
         }
-        $('#action-participate').removeClass('ui-state-active');
-        $('#action-carte').addClass('ui-state-active');
+        $('#action-participate').removeClass('state-active');
+        $('#action-carte').addClass('state-active');
         $('#edit-actions').hide();
         $('#map-actions').show();
         $('#edit-panel').hide();
@@ -89,8 +89,8 @@ $(function(){
     });
 
     $("#action-participate").click(function(){
-        $('#action-carte').removeClass('ui-state-active');
-        $('#action-participate').addClass('ui-state-active');
+        $('#action-carte').removeClass('state-active');
+        $('#action-participate').addClass('state-active');
         $('#map-actions').hide();
         $('#edit-actions').show();
         $('#map-panel').hide();
@@ -118,7 +118,7 @@ $(function(){
 
     $('.share-icon').click(function(){
         $(this).hide();
-        $(this).parent().nextAll('.shared').show();
+        $(this).nextAll('.shared').show();
         return false;
     });
     $('.print-page').click(function(){
diff --git a/templates/chimere/blocks/actions.html b/templates/chimere/blocks/actions.html
index d2deed7..284b79f 100644
--- a/templates/chimere/blocks/actions.html
+++ b/templates/chimere/blocks/actions.html
@@ -1,25 +1,26 @@
 {% load i18n chimere_tags %}
     <div id="topbar">
         <ul id='action' class='action'>
-            <li id='action-carte' class='ui-widget ui-button ui-state-default ui-corner-all ui-state-active'>
+            <li id='action-carte' class='state-active'>
                 {% trans "Map" %}
             </li>
-            <li id='action-participate' class='ui-widget ui-button ui-state-default ui-corner-all'>
+            <li id='action-participate'>
                 {% trans "Participate" %}
             </li>
         </ul>
         <ul id='action-2' class='action'>
-            <li id='action-news' class='ui-widget ui-button ui-state-default ui-corner-all'>
+            <li id='action-news'>
                 {% trans "News" %}
             </li>
-        <li class='ui-widget ui-button ui-state-default ui-corner-all'>
-            <a class='dyn-page' href='{% url chimere:extra_page "" "project"%}'>{% trans "The project" %}</a>
-        </li>
+            <li id='action-project'>
+                <a class='dyn-page' href='{% url chimere:extra_page "" "project"%}'>{% trans "The project" %}</a>
+            </li>
         </ul>
         <ul id='action-3' class='action'>
-        <li><a href='#' class='print-page'><img src='{{STATIC_URL}}chimere/img/printer.png'/></a></li>
-        <li>
-        {% share_bar %}
-        </li>
+            <li class='print-page'><a href='#'>{% trans "Print"%}</a></li>
+            <li class='share-list'>
+            {% share_bar %}
+            </li>
+            <li class='help-page'><a href='#'>{% trans "Help"%}</a></li>
         </ul>
     </div>
diff --git a/templates/chimere/blocks/categories.html b/templates/chimere/blocks/categories.html
index 5d54d6c..20d3a47 100644
--- a/templates/chimere/blocks/categories.html
+++ b/templates/chimere/blocks/categories.html
@@ -1,9 +1,9 @@
 {% load i18n %}
     <ul id='ul_categories'>
         {% for category, lst_sub_categories in sub_categories %}
-        <li class='main_category'>
+        <li class='main_category {% if category.selected %}toggle_minus{%else%}toggle_plus{%endif%}'>
             <span id='main_category_{{category.pk}}'><label>{% trans category.name %}</label>
-            <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}chimere/img/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" /></span>
+            <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}saclay/images/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" /></span>
             <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}>
                 {% for sub_category in lst_sub_categories %}
                 <li id='li_sub_{{sub_category.id}}'>
diff --git a/templates/chimere/blocks/map.html b/templates/chimere/blocks/map.html
index b2af484..4277d19 100644
--- a/templates/chimere/blocks/map.html
+++ b/templates/chimere/blocks/map.html
@@ -19,8 +19,8 @@
     var routing_panel_open = function(){
         $('#frm_categories').hide();
         $('#chimere_itinerary_panel').show();
-        $('#action-categories').removeClass('ui-state-active');
-        $('#action-routing').addClass('ui-state-active');
+        $('#action-categories').removeClass('state-active');
+        $('#action-routing').addClass('state-active');
     };
 
     $('#action-routing').click(routing_panel_open);
@@ -28,8 +28,8 @@
     var category_panel_open = function(){
         $('#chimere_itinerary_panel').hide();
         $('#frm_categories').show();
-        $('#action-routing').removeClass('ui-state-active');
-        $('#action-categories').addClass('ui-state-active');
+        $('#action-routing').removeClass('state-active');
+        $('#action-categories').addClass('state-active');
     };
 
     $('#action-categories').click(category_panel_open);
@@ -42,6 +42,8 @@
     var chimere_init_options = {};
     chimere_init_options["routing_panel_open"] = routing_panel_open;
     chimere_init_options["category_accordion"] = false;
+    chimere_init_options["category_plus"] = STATIC_URL + "saclay/images/plus.png";
+    chimere_init_options["category_minus"] = STATIC_URL + "saclay/images/minus.png";
     chimere_init_options["popupClass"] = OpenLayers.Popup.SaclayCloud;
     chimere_init_options["popupClass"].imageSrc = "{{STATIC_URL}}/saclay/js/cloud-popup-saclay.png";
     chimere_init_options["popupContentFull"] = true;
diff --git a/templates/chimere/blocks/share_bar.html b/templates/chimere/blocks/share_bar.html
index ee66b13..ce8a641 100644
--- a/templates/chimere/blocks/share_bar.html
+++ b/templates/chimere/blocks/share_bar.html
@@ -4,11 +4,11 @@
     <a href='{{share_network.1}}'>{{share_network.0}}</a>
     {% endfor %}{%else%}
     <ul class='share'>
-        <li><a href="#" class='share-icon'><img src="{{STATIC_URL}}chimere/img/share-icon.png" alt="{% trans 'Share' %}"/></a></li>{% for share_network in share_networks %}
+        <li class='share-send'><a class='share_link share_id_{{share_networks.0.0}}' href='{{share_networks.0.1}}'>{% trans "Email" %}</a></li>
+        <li class='share-icon'><a href="#">{% trans "Share" %}</a></li>{% for share_network in share_networks %}
         <li class='shared' style='display:none'><a class='share_link share_id_{{share_network.0}}' href='{{share_network.1}}'><img src="{{share_network.2}}" alt="{{share_network.0}}"/></a></li>
-    {% endfor %}</ul>
-    <ul class='share'>
-        <li><a href='{% url chimere:feeds-global %}'><img src='{{STATIC_URL}}chimere/img/feed.png'/></a></li>
+    {% endfor %}
+        <li class='shared' style='display:none'><a href='{% url chimere:feeds-global %}'><img src='{{STATIC_URL}}chimere/img/feed.png'/></a></li>
     </ul>{% endif %}
     <script type='text/javascript'>
         $(function(){
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index cabc09b..b7fee63 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -21,25 +21,24 @@
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
     <div class='sidebar-handler' id='sidebar-handler-hide'>
-    &lt;
     </div>
     <div id='action-panel'>
         <ul id='map-actions' class='action'>
-            <li id='action-categories' class='ui-widget ui-button ui-state-default ui-corner-all ui-state-active'>
+            <li id='action-categories' class='state-active'>
                 <label>{% trans "Categories" %}</label>
             </li>
-            <li id='action-routing' class='ui-widget ui-button ui-state-default ui-corner-all'>
+            <li id='action-routing'>
                 <label>{% trans "Routing" %}</label>
             </li>
         </ul>
         <ul id='edit-actions' class='action'>
-            <li id='action-edit-marker' class='ui-widget ui-button ui-state-default ui-corner-all ui-state-active'>
+            <li id='action-edit-marker' class='state-active'>
                 <label>{% trans "Location" %}</label>
             </li>
-            <li id='action-edit-route' class='ui-widget ui-button ui-state-default ui-corner-all'>
+            <li id='action-edit-route'>
                 <label>{% trans "Wander" %}</label>
             </li>
-            <li id='action-edit-event' class='ui-widget ui-button ui-state-default ui-corner-all'>
+            <li id='action-edit-event'>
                 <label>{% trans "Event" %}</label>
             </li>
         </ul>
@@ -62,9 +61,9 @@
         </div>
     </div>
     <div class='footer' id='footer-panel'>
-        {% if contact_email %}<a href='mailto:{{contact_email}}' id='contactus'>{% trans "Contact us" %}</a> - {% endif %}
-        <a href='{% url chimere:extra_page '' 'legal' %}' id='page-legal' class='dyn-page'>{% trans "Terms of service" %}</a> -
-        <a href='{% url chimere:extra_page '' 'credit' %}' id='page-credit' class='dyn-page'>{% trans "Credits" %}</a>
+        {% if contact_email %}<a href='mailto:{{contact_email}}' id='contactus'>{% trans "contact us" %}</a> | {% endif %}
+        <a href='{% url chimere:extra_page '' 'legal' %}' id='page-legal' class='dyn-page'>{% trans "terms of service" %}</a> |
+        <a href='{% url chimere:extra_page '' 'credit' %}' id='page-credit' class='dyn-page'>{% trans "credits" %}</a>
     </div>
 {% endblock %}
 {% block content %}
@@ -77,7 +76,6 @@
     });
     </script>
     <div class='sidebar-handler' id='sidebar-handler-show'>
-    &gt;
     </div>
     <div id='detail' class='ui-widget ui-corner-all'></div>
     <div id='permalink' style='display:none'></div>
@@ -85,6 +83,7 @@
     {% display_news news_visible %}
     {{block.super}}
     <div id='main-map'></div>
+    <div id='map-shadow'></div>
     <div id='default-message'></div>
 <script type="text/javascript">
    $("#main-map").show();